import React, { useEffect } from 'react'
import 'echarts-liquidfill'
import * as echarts from 'echarts'
import { getOptions } from './options'
import styles from './index.module.less'
import type { SwiperItemProps, TeacherReportData } from '../../interface'

interface Props
    extends SwiperItemProps,
        Pick<TeacherReportData, 'busy_quarter' | 'quarter_student_module'> {}

export const SeventhPage = (props: Props) => {
    const quarterData = props.quarter_student_module
    const isActive = props.current === props.itemIndex

    useEffect(() => {
        if (isActive && quarterData) {
            const data: string[] = [] // 季度
            const studentData: number[] = [] // 人员数量
            const studentQualityData: number[] = [] // 合格人员数量

            quarterData.forEach(item => {
                data.push(item.quarter)
                studentData.push(item.student_num)
                studentQualityData.push(item.student_quality_num)
            })

            const goodsPoint = echarts.init(document.getElementById('preview') as HTMLElement)
            goodsPoint.setOption(getOptions(data, studentData, studentQualityData))
        }
    }, [isActive, quarterData])

    return (
        <div className={styles.statistics}>
            <h5>这一年，您格外忙碌的是</h5>
            <h3>{props?.busy_quarter}</h3>
            <div className={styles.statistics_view}>
                <div className={styles.statistics_view_item}>
                    <section>
                        <div />
                        <span>参训学员</span>
                    </section>
                    <section className={styles.qualified}>
                        <div />
                        <span>合格学员</span>
                    </section>
                </div>
                <div className={styles.statistics_view_preview} id={'preview'} />
            </div>
            <p>在您2024年创培记忆里</p>
            <p>留下浓墨重彩的一笔</p>
        </div>
    )
}

export default SeventhPage
